<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Style</span></h1>
        <p>Certain rows or cells can easily be styled based on conditions.</p>
    </div>
    <app-demoActions github="table" stackblitz="tablestyle-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-table [value]="products" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Quantity</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr [ngClass]="{'row-accessories': product.category === 'Accessories'}">
                    <td>{{product.code}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.category}}</td>
                    <td>
                        <div [ngClass]="{'outofstock': product.quantity === 0, 'lowstock': (product.quantity > 0 && product.quantity < 10),'instock': product.quantity > 10}">
                            {{product.quantity}}
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablestyle-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table [value]="products" responsiveLayout="scroll"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th&gt;Code&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Category&lt;/th&gt;
            &lt;th&gt;Quantity&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-product&gt;
        &lt;tr [ngClass]="&#123;'row-accessories': product.category === 'Accessories'&#125;"&gt;
            &lt;td&gt;&#123;&#123;product.code&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;product.category&#125;&#125;&lt;/td&gt;
            &lt;td&gt;
                &lt;div [ngClass]="&#123;'outofstock': product.quantity === 0, 'lowstock': (product.quantity &gt; 0 && product.quantity &lt; 10),'instock': product.quantity &gt; 10&#125;"&gt;
                    &#123;&#123;product.quantity&#125;&#125;
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';

@Component(&#123;
    templateUrl: './tablestyledemo.html',
    styles: [`
        .outofstock &#123;
            font-weight: 700;
            color: #FF5252;
            text-decoration: line-through;
        &#125;

        .lowstock &#123;
            font-weight: 700;
            color: #FFA726;
        &#125;

        .instock &#123;
            font-weight: 700;
            color: #66BB6A;
        &#125;

        :host ::ng-deep .row-accessories &#123;
            background-color: rgba(0,0,0,.15) !important;
        &#125;
    `
    ]
&#125;)
export class TableStyleDemo implements OnInit &#123;

    products: Product[];

    constructor(private productService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products = data);
    &#125;

&#125;
</app-code>

        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablestyle-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
